<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    autocomplete="on"
    label-position="right"
    label-width="95px"
  >
    <div v-for="item in cols" :key="item.colName">
      <el-form-item
        v-if="!(item.colName==='id' && editType==='add') && item.hiddenIn !== editType"
        :label="item.displayName"
        :prop="item.colName"
      >
        <!-- 选择 -->
        <el-select
          v-if="item.dataType==='select'"
          v-model="form[item.colName]"
          :readonly="item.readOnly||readonly"
          @change="onSelectChange(item, form)"
        >
          <el-option
            v-for="opt in item.data.options"
            :key="opt.value"
            :label="opt.name"
            :value="opt.value"
          />
        </el-select>
        <!-- 时间段 -->
        <el-time-picker
          v-else-if="item.dataType==='timeRange'"
          v-model="form[item.colName]"
          is-range
          format="HH:mm"
          value-format="HH:mm"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        />
        <!-- 默认 -->
        <el-input
          v-else
          v-model="form[item.colName]"
          :readonly="item.readOnly||readonly"
          :type="item.dataType"
        />
      </el-form-item>
    </div>
    <el-form-item>
      <el-button v-if="!readonly" type="primary" @click="onSubmit">确定</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import apiDefines from '../commontable/apidefines'

export default {
  name: 'PriceEdit',
  props: {
    readonly: {
      type: Boolean,
      default: false
    },
    values: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {},
      rules: {},
      editType: 'edit',
      cols: []
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'name',
      'avatar',
      'roles'
    ])
  },
  watch: {
    values(newValues) {
      this.form = Object.assign({}, newValues)
      this.switchType()
    }
  },
  created() {
  },
  mounted() {
    this.form = Object.assign({}, this.values)
    this.switchType()
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const retform = Object.assign({}, this.form)
          // 格式化时间范围
          this.cols.forEach(item => {
            if (item.dataType === 'timeRange') {
              if (Array.isArray(this.form[item.colName])) {
                retform[item.colName] = this.form[item.colName].join('-')
              }
            }
          })
          this.$emit('onSubmit', retform)
        } else {
          console.log('error validate', this.form)
          this.$message.error('表单内有错误，请检查修改后再提交！')
        }
      })
    },
    onCancel() {
      this.$emit('onCancel')
    },
    onSelectChange(item, form) {
      if (item.colName === 'priceType') {
        this.switchType()
      }
    },
    switchType() {
      if (this.form.priceType === 1) {
        this.cols = apiDefines.price.editCols
        this.rules = apiDefines.price.editRules
      } else if (this.form.priceType === 2) {
        this.cols = apiDefines.price2.editCols
        this.rules = apiDefines.price2.editRules
        // 格式化时间范围
        this.cols.forEach(item => {
          if (item.dataType === 'timeRange') {
            if (typeof this.form[item.colName] === 'string') {
              this.form[item.colName] = this.form[item.colName].split(/[-~]/).slice(0, 2)
            }
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.line{
  text-align: center;
}
</style>
